<template>
  <div class="me">
    <!-- 标题 -->
    <div class="title">BuddyParty</div>
    <!-- 用户卡片 -->
    <div class="user-card">
      <!-- 顶部 -->
      <div class="user-top">
        <div class="photo">
          <img src="@/assets/me-user.png" alt="">
        </div>
        <div v-if="!$store.state.user.userInfo.phone" class="username">UserName</div>
        <div v-else class="username">{{ $store.state.user.userInfo.phone }}</div>
        <div class="leave" @click="doLeave">
          <img src="@/assets/leave.png" alt="">
        </div>
      </div>
      <!-- 底部 -->
      <div class="user-bottom">
        <!-- 成功 -->
        <div @click="doSuccess">
          <div class="box-photo">
            <img src="@/assets/success.png" alt="">
          </div>
          <div class="box-desc">
            <span>Success</span>
            <img src="@/assets/jiantou.png" alt="">
          </div>
        </div>
        <!-- 逾期 -->
        <div @click="doOverdue">
          <div class="box-photo">
            <img src="@/assets/oclick.png" alt="">
          </div>
          <div class="box-desc">
            <span>Overdue</span>
            <img src="@/assets/jiantou.png" alt="">
          </div>
        </div>
        <!-- 已完成 -->
        <div @click="doFinish">
          <div class="box-photo">
            <img src="@/assets/finsh.png" alt="">
          </div>
          <div class="box-desc">
            <span>Finish</span>
            <img src="@/assets/jiantou.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="mask">
      <img src="@/assets/Maskgroup.png" alt="">
    </div>
    <!-- 间隙 -->
    <div class="jian"></div>
    <!-- orther function -->
    <OrtherFunction></OrtherFunction>
  </div>
</template>
<script>
import { Dialog } from 'vant'
import OrtherFunction from '@/components/OrtherFunction.vue'
import { getUserInfo } from "../api";
import { jiemi } from "../utils/aeskey.js";
export default {
  components: { 'OrtherFunction': OrtherFunction },
  data() {
    return {
    }
  },
  methods: {
    //退出
    doLeave() {
      Dialog.confirm({
        message: 'Are you sure to exit',
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel'
      }).then(() => {
        this.$store.commit('leaving')
        this.$store.commit('user/clearuserInfo')
        this.$store.commit('shouye/doChange', 1)
      });
    },
    doSuccess() {
      this.$router.push('/myorder')
      this.$store.commit('changeCount', 2)
    },
    doOverdue() {
      this.$router.push('/myorder')
      this.$store.commit('changeCount', 3)
    },
    doFinish() {
      this.$router.push('/myorder')
      this.$store.commit('changeCount', 4)
    },
    async UserInfo() {
      // const res = await getUserInfo()
      // console.log('用户数据', jiemi(res.data).model)
      // this.$store.dispatch('user/getUserInfo', jiemi(res.data).model)
    }
  },
  created() {
    this.UserInfo()
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  }
}
</script>
<style scoped lang="less">
@a: 3.75vw;

.me {
  position: relative;

  .title {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: (20/@a);
    line-height: 48px;
    margin-left: (20/@a);
    color: #000000;
  }

  // 用户卡片
  .user-card {
    width: (310/@a);
    height: (168/@a);
    border-radius: (20/@a);
    margin-top: (21/@a);
    margin-left: (20/@a);
    z-index: 99;

    .user-top {
      height: (84/@a);
      display: flex;
      justify-content: space-between;

      .photo {
        width: (50/@a);
        height: (50/@a);
        background-color: #fff;
        border-radius: 50%;
        text-align: center;
        margin-top: (19/@a);
        margin-left: (16/@a);

        img {
          width: (35/@a);
          margin-top: (5/@a);
        }
      }

      .username {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: (24/@a);
        color: #FFFFFF;
        margin-top: (30/@a);
        margin-right: (40/@a);
      }

      .leave {
        width: (25/@a);
        height: (25/@a);
        background-color: #fff;
        border-radius: 50%;
        margin-top: (15/@a);

        padding-left: (3/@a);

        img {
          width: (23/@a);
        }
      }
    }

    .user-bottom {
      height: (84/@a);
      display: flex;
      justify-content: space-around;

      .box-photo {
        width: (40/@a);
        height: (40/@a);
        background-color: #fff;
        border-radius: 50%;
        text-align: center;
        margin-left: (10/@a);

        img {
          margin-top: (8/@a);
          width: (25/@a);
        }
      }

      .box-desc {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: (14/@a);
        color: #FFFFFF;

        img {
          width: (10/@a);
          margin-left: (5/@a);
        }
      }

    }
  }

  // 遮罩层
  .mask {
    position: absolute;
    top: (70/@a);
    left: (20/@a);
    width: (315/@a);
    height: (168/@a);
    z-index: -1;

    img {

      width: 100%;
    }
  }

  // 间隙
  .jian {
    height: (10/@a);
    background-color: #f5f5f5;
    margin-top: (29/@a);
  }
}
</style>